<template>
  <div class="page-com-custom-container">
    <el-row>
      <el-col :lg="{span:10}"
              :md="{span:11}">
        <span>选择单位类型 :</span>
        <el-select v-model="unitTypeName"
                   placeholder="请选择类型"
                   @change="getUnitType">
          <el-option v-for="item in unitTypeData"
                     :key="item.value"
                     :label="item.name"
                     :value="item.value"></el-option>
        </el-select>
      </el-col>
      <el-col :lg="{span:10,offset:4}"
              :md="{span:13}"
              align="right"
              class="pull-right">
        <el-button type="primary"
                   @click="getModelData">添加模块</el-button>
        <el-button type="primary"
                   @click="layoutPreview">布局预览</el-button>
        <el-button type="primary"
                   @click="layoutDefinition">布局定义</el-button>
      </el-col>
    </el-row>
    <div class="page-component-table">
      <el-row>
        <el-col :span="4">
          <el-tree :data="companyTreeData"
                   :props="companyTreeProps"
                   node-key="value"
                   :highlight-current="true"
                   @node-click="handleNodeClick"
                   :default-checked-keys="[1]"></el-tree>
        </el-col>
        <el-col :span="20">
          <el-table :header-cell-style="{background:'#f5f5f5'}"
                    highlight-current-row
                    :data="pageMaintainData.list"
                    class="page-list-table"
                    border>
            <el-table-column prop="page_tmp_name"
                             label="页面"
                             align="center"
                             show-overflow-tooltip></el-table-column>
            <el-table-column prop="moudle_name"
                             label="模块名称"
                             align="center"
                             show-overflow-tooltip></el-table-column>
            <el-table-column prop="moudle_type"
                             label="模块类型"
                             align="center"
                             :formatter="handleModuleTypeFilter"
                             show-overflow-tooltip></el-table-column>
            <el-table-column prop="router"
                             label="路由地址"
                             align="center"
                             show-overflow-tooltip></el-table-column>
            <el-table-column prop="height"
                             label="高度"
                             align="center"
                             show-overflow-tooltip></el-table-column>
            <el-table-column prop="width"
                             label="宽度"
                             align="center"
                             show-overflow-tooltip></el-table-column>
            <el-table-column prop="flush_time"
                             label="刷新时间"
                             align="center"
                             show-overflow-tooltip></el-table-column>
            <el-table-column label="操作"
                             align="center"
                             show-overflow-tooltip>
              <template slot-scope="scope">
                <el-button size="mini"
                           type="danger"
                           icon="el-icon-delete"
                           @click="delPageModule(scope.row.instance_moudle_id,scope.row.moudle_name)"></el-button>
                <el-button @click="modulePreview(scope.row)"
                           type="text">预览</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-col :span="24"
                  id="bottomMargin">
            <el-pagination @current-change="handlePageChange"
                           :current-page="requestParam.page"
                           :page-size="requestParam.page_size"
                           layout="total,sizes,prev, pager, next, jumper"
                           background
                           :total="pageMaintainData.total_count"
                           align="center">
            </el-pagination>
          </el-col>

        </el-col>
      </el-row>
    </div>
    <ModulePreviewDialog :dialogVisible.sync="modulePreviewDialogVisible"
                         :layoutData="layoutData"></ModulePreviewDialog>
    <AddModuleDialog :dialogVisible.sync="addModuleDialogVisible"
                     :data="addModuleParameter"
                     :pageTypeId='pageTypeIds'
                     @backStatus="getSureAddModule"></AddModuleDialog>
  </div>
</template>
<script>
import { pageComMaintainApi, pageComCustomApi } from "@/services/SystemSetting";
import { standardCodeApi } from '@/services/StandardCode'
import ModulePreviewDialog from "./components/ModulePreviewDialog";
import AddModuleDialog from "./components/AddModuleDialog";
export default {
  data () {
    return {
      requestParam: {
        page: 1,
        instance_type: 4,
        rela_id: this.unitTypeName,
        page_tmp_id: 1
      },
      pageMaintainData: {
        list: [],
        total_page: 0,
        total_count: 0
      },
      companyTreeData: [
        {
          label: "首页",
          value: "1"
        }
      ],
      companyTreeProps: {
        children: "children",
        label: "label"
      },
      unitTypeData: [],
      unitTypeName: "",
      pageTypeIds: '',
      choosenCompany: {},
      // 预览模块弹框是否可见
      modulePreviewDialogVisible: false,
      addModuleDialogVisible: false,
      addModuleParameter: {},
      // 预览模块弹框所展示模块的数据
      layoutData: {},
      moduleTypeData: []
    };
  },
  components: {
    ModulePreviewDialog,
    AddModuleDialog
  },
  watch: {
    choosenCompany: {
      handler (newval, oldval) {
        this.requestParam.rela_id = newval.id;
        this.selectForm.unitName = newval.company_name;
        this.getModuleList();
      },
      deep: true
    }
  },
  methods: {
    // 获取模块列表
    getModuleList () {
      pageComCustomApi
        .getPageModuleList({
          params: this.requestParam
        })
        .then(res => {
          if (res.data) {
            this.pageTypeIds = [];
            this.pageMaintainData.list = res.data.data;
            this.pageMaintainData.total_count = res.data.total;
            this.pageMaintainData.list.filter(item => {
              this.pageTypeIds.push(item.page_moudle_id)
            })
            this.pageTypeIds = this.pageTypeIds.join(',')
          }
        });
    },
    // 预览模块
    modulePreview (row) {
      this.layoutData = row;
      this.modulePreviewDialogVisible = true;
    },
    //页面预览
    layoutPreview () {
      if (this.requestParam.rela_id == "" || this.companyTreeData.value == "") {
        this.$message({
          showClose: true,
          message: "请选择单位和页面",
          type: "warning"
        });
      } else {
        this.$router.push({
          path: "PageComPriview",
          query: {
            isEdit: false,
            unitId: this.requestParam.rela_id,
            pageId: this.companyTreeData.value,
            instance_type: 4
          }
        });
      }
    },
    //页面定制
    layoutDefinition () {
      if (this.requestParam.rela_id == "" || this.companyTreeData.value == "") {
        this.$message({
          showClose: true,
          message: "请选择单位和页面",
          type: "warning"
        });
      } else {
        this.$router.push({
          path: "PageComPriview",
          query: {
            isEdit: true,
            unitId: this.requestParam.rela_id,
            pageId: this.companyTreeData.value,
            instance_type: 4
          }
        });
      }
    },
    //分页
    handlePageChange (page) {
      this.requestParam.page = page;
      this.getModuleList();
    },
    //页面选择
    handleNodeClick (data) {
      this.requestParam.page_tmp_id = data.value;
      // this.getModuleList()
    },
    //单位类型选择
    getUnitType (val) {
      this.requestParam.rela_id = val;
      this.getModuleList();
    },
    //添加模块
    getModelData () {
      if (this.requestParam.rela_id == '' || this.companyTreeData.value == '') {
        this.$message({
          showClose: true,
          message: '请选择单位和页面',
          type: 'warning'
        });
      } else {
        this.addModuleDialogVisible = true;
        this.addModuleParameter = this.requestParam
      }
    },
    delPageModule (id, moudle_name) {
      this.$confirm('您确定删除"' + moudle_name + '"模块?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        left: true
      }).then(() => {
        pageComCustomApi
          .delPageModule({
            data: {
              id: id
            }
          })
          .then(res => {
            if (res.code == 0) {
              this.$message.success("删除成功!");
              this.getModuleList();
            } else {
              this.$message.error(res.msg);
            }
          });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },
    // 获取单位类型列表
    getCompanyTypeList () {
      standardCodeApi
        .getStandardCodeData({
          data: {
            code_type: 'companyType'
          }
        })
        .then(
          res => {
            if (res.data) {
              this.unitTypeData = res.data.list;
            }
          },
          err => {
            console.log(err);
          }
        );
    },
    //添加成功刷新列表
    getSureAddModule (data) {
      this.addModuleDialogVisible = false;
      this.getModuleList();
    },
    // 获取模块类型列表
    getModuleTypeList () {
      standardCodeApi
        .getStandardCodeData({
          data: {
            code_type: "pageMoudleType"
          }
        })
        .then(
          res => {
            if (res.data) {
              this.moduleTypeData = res.data.list;
            }
          },
          err => {
            console.log(err);
          }
        );
    },
    handleModuleTypeFilter (row) {
      var moduleType;
      this.moduleTypeData.filter(item => {
        if (item.value == row.moudle_type) {
          moduleType = item.name;
        }
      });
      return moduleType;
    }
  },
  created () {
    // if (window.sessionStorage.getItem('access_token')) {
    if (window.localStorage.getItem('access_token')) {
      this.getCompanyTypeList();
      this.getModuleTypeList()
    }
  },
  mounted () { }
};
</script>
<style scoped lang='scss'>
#bottomMargin {
  margin-top: 20px;
}
.page-com-custom-container {
  width: 100%;
  min-height: 500px;
  padding: 20px;

  .choose-company-input {
    width: 235px;
  }

  .page-component-table {
    margin-top: 20px;
  }
}
</style>